<template>
    <div class="bankruptcy">
        <y-header></y-header>
        <div class="w store-content">
            <div class="gray-box">
                <div class="gallery-wrapper">
                    <div class="gallery">
                        <div class="thumbnail">
                            <ul>
                                <li v-for="(item,i) in small" :key="i" :class="{on:big===item}" @click="big=item">
                                    <img v-lazy="item" :alt="product.productName">
                                </li>
                            </ul>
                        </div>
                        <div class="thumb">
                            <div class="big">
                                <img src="https://liquidation-1.oss-cn-hangzhou.aliyuncs.com/baa9134c6dca782ab4a1041700c8a016.jpg"
                                     alt="破产流程">
                            </div>
                        </div>
                    </div>
                </div>
                <!--右边-->
                <div class="banner">
                    <div class="sku-custom-title">
                        <h4>司法破产清算重整系统</h4>
                        <h6>
                            <span>{{product.subTitle}}</span>
                        </h6>
                    </div>
                    <div class="num">
                        <span class="params-name">破产清算管理系统是由杭州法汇数据有限公司联合地区法院、银行和中钞区块链技术研究院共同开发完成的，为司法破产清算案件、公司自行清算和公司产品项目清算提供数据化、智能化和可信化解决方案的群体性权益类案件的普适性操作平台。系统提供债权或出资信息申报、债权或出资信息审核、在线会议和线上履行通知等功能服务。本平台根据用户性质目前分为两个系统，管理人系统和债权人（出资人）系统。债权人（出资人）通过手机端进行操作，管理人通过PC电脑端进行操作。</span>
                    </div>
                    <div class="buy">
                        <el-button type="primary" style="margin-right: 30px" @click="goReceiver">管理端口</el-button>
                        <el-popover
                                placement="right"
                                trigger="click">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>破产案件管理平台债权申报模块债权人操作指引</span>
                                </div>
                                <div>
                                    <h1>1 安装“工银融e联”APP 并注册登陆</h1>
                                    <br>
                                    <h2>1.1. 安装“工银融e联”APP
                                    </h2>
                                    <br>
                                    <p>扫描下方二维码下载安装“工银融e联”APP，也可在各大应用市场中搜索安装。</p>
                                    <br>
                                    <p style="text-align: center"><img width="150" height="150"
                                                                       src="https://liquidation-1.oss-cn-hangzhou.aliyuncs.com/6ae6a8f1b7fb7e5a044b10942c2f090b.png">
                                    </p>
                                    <br>
                                    <h2>1.2.注册并登陆（推荐方法①、②）</h2>
                                    <br>
                                    <p> ① 工商银行持卡客户（已办理网上银行或手机银行），可通过直接电子银行用户名密码/短信验证码登陆。
                                        <br>
                                        ②
                                        工商银行持卡客户（未办理网上银行或手机银行），请按工银融e联系统指引自行注册后登陆，建议在登陆后首先通过融e联“钱包”－“银行卡”功能绑定一张本人的工行卡，以完成实名认证，便于平台识别您的身份。
                                        <br>
                                        ③ 非工商银行持卡客户，请按工银融e联系统指引自行注册后登陆。（建议至就近工行网点办理借记卡及电子银行后登陆工银融e联，如方法①，便于进行身份认证）
                                    </p>
                                    <h1>2 关注公众号（推荐方法①）</h1>
                                    <br>
                                    <p>① 用工银融e联APP，点击右上角“+”扫一扫，扫描下方二维码关注“破产案件管理平台”公众号。 </p>
                                    <br>
                                    <p style="text-align: center"><img width="150" height="150"
                                                                       src="https://liquidation-1.oss-cn-hangzhou.aliyuncs.com/6fafe7ff3bd75247bb66c766ba59b1f1.png">
                                        <br>
                                    <p>② 也可通过“发现”－右上方“＋”－“添加公众号”－搜索“破产清算与托管征集平台”－关注并进入公众号。</p>
                                    <br>
                                    <h1>3 进行预申报</h1>
                                    <br>
                                    <h2>3.1. 材料准备</h2>
                                    <p> ①
                                        债权申报证据清单等书面纸质材料（邮递材料内提供，或可在“破产清算与托管征集平台”主页右侧“案件公告”，找到XXXXX公司破产清算案，点击“查看”，下载相应所需要的附件，材料请认真填写）
                                        <br>
                                        ② 证据清单中列明的全部证据材料及您认为必要的其他材料
                                    </p>
                                    <br>
                                    <h1>3.2. 线上申报</h1>
                                    <br>
                                    <p>
                                        在“破产案件管理平台”公众号中，选择公众号左上方“扫码预申报”，扫描下方案件二维码（其他扫码方式将无法进入申报界面），进入案件后根据指引进行债权预申报，并上传已准备的债权图片资料。</p>
                                    <br>
                                    <p>提示：
                                        <br>
                                        ①
                                        请确认您登录的融E联账号是您本人的。如果您是本人申报，系统将核对您的身份和填写的债权人信息是否一致；如果您是代理人帮其他个人或公司申报债权人，系统将核对您的身份和填写的代理人信息是否一致，不一致将无法申报。
                                        <br>
                                        ② 填写的债权金额必须由“数字”和“.”组成，不能带有“￥”和“元”等其他文字。
                                    </p>
                                    <br>
                                    <h1>4 提交书面债权申报材料</h1>
                                    <p>
                                        预申报完成后，将预申报中提供的全部材料，于债权申报截止日前，邮寄给管理人（地址后附）。管理人收到您提交的债权申报材料后，将对申报的债权进行审核，并视审核情况要求您补充证据材料或提供证据原件进行核对（审核情况变动将以工银融e联APP推送信息及手机短信形式推送，请关注您的工银融e联信息、手机短信及公众号中“我的案件”，及时了解审核进展）。
                                        <br>
                                        书面材料邮寄地址：
                                        <br>
                                        收件人：X律师、X律师
                                        <br>
                                        地址：XXXX
                                        <br>
                                        联系电话：XXXX、XXX
                                    </p>
                                </div>
                            </el-card>
                            <el-button type="success" slot="reference">债权端口</el-button>
                        </el-popover>
                    </div>
                </div>
            </div>
            <!--产品信息-->
            <div class="item-info">
                <y-shelf title="产品介绍">
                    <div slot="content">
                        <div class="img-item" v-if="productMsg">
                            <div v-html="productMsg">{{ productMsg }}</div>
                        </div>
                        <div class="no-info" v-else>
                            <img src="https://liquidation-1.oss-cn-hangzhou.aliyuncs.com/e3a83f794b2687c2adb1837b6c3b6a14.png">
                            <br>
                        </div>
                    </div>
                </y-shelf>
            </div>
        </div>
        <y-footer></y-footer>
    </div>
</template>
<script>
    import YShelf from '../components/shelf'
    import YButton from '../components/YButton'
    import YHeader from './common/header'
    import YFooter from './common/footer'

    export default {
        data() {
            return {
                productMsg: "",
                small: [],
                big: '',
                product: {
                    salePrice: 0
                },
                productNum: 1,
                userId: ''
            }
        },
        computed: {},
        methods: {
            goReceiver() {
                window.open("http://web.zj.icbc.com.cn/bankruptcy/web/login");
            },
            goCreditor() {
                window.open("http://www.fahuidata.com/receiver/share/login");
            }
        },
        components: {
            YHeader,
            YFooter,
            YShelf,
            YButton
        },
        created() {
        }
    }
</script>
<style lang="scss" scoped>
    @import "../assets/style/mixin";

    .bankruptcy {
        display: flex;
        flex-direction: column;
    }

    .store-content {
        clear: both;
        width: 1220px;
        min-height: 600px;
        padding: 0 0 25px;
        margin: 0 auto;
    }

    .gray-box {
        display: flex;
        padding: 60px;
        margin: 20px 0;

        .gallery-wrapper {
            .gallery {
                display: flex;
                width: 540px;

                .thumbnail {
                    li:first-child {
                        margin-top: 0px;
                    }

                    li {
                        @include wh(80px);
                        margin-top: 10px;
                        padding: 12px;
                        border: 1px solid #f0f0f0;
                        border: 1px solid rgba(0, 0, 0, .06);
                        border-radius: 5px;
                        cursor: pointer;

                        &.on {
                            padding: 10px;
                            border: 3px solid #ccc;
                            border: 3px solid rgba(0, 0, 0, .2);
                        }

                        img {
                            display: block;
                            @include wh(100%);
                        }
                    }
                }

                .thumb {
                    .big {
                        margin-left: 20px;
                    }

                    img {
                        display: block;
                        @include wh(440px)
                    }
                }
            }
        }

        // 右边
        .banner {
            width: 450px;
            margin-left: 10px;

            h4 {
                font-size: 24px;
                line-height: 1.25;
                color: #000;
                margin-bottom: 13px;
            }

            h6 {
                font-size: 14px;
                line-height: 1.5;
                color: #bdbdbd;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .sku-custom-title {
                overflow: hidden;
                text-align: center;
                padding: 8px 8px 18px 10px;
                position: relative;
            }

            .params-name {
                padding-right: 20px;
                font-size: 14px;
                color: #8d8d8d;
                line-height: 36px;
            }

            .num {
                padding: 29px 0 8px 10px;
                border-top: 1px solid #ebebeb;
                display: flex;
                align-items: center;
            }

            .buy {
                position: relative;
                border-top: 1px solid #ebebeb;
                padding: 30px 0 0 10px;
            }
        }
    }

    .item-info {

        .gray-box {
            padding: 0;
            display: block;
        }

        .img-item {
            width: 1220px;
            // padding: 1vw;
            text-align: center;

            img {
                width: 100%;
                height: auto;
                display: block;
            }
        }
    }

    .no-info {
        text-align: center;
        font-size: 30px;
    }

    .price {
        display: block;
        color: #d44d44;
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        text-align: right;

        i {
            padding-left: 2px;
            font-size: 24px;
        }
    }

    .box-card {
        width: 480px;
    }
</style>
